<template>
  <div>
    <!--       
  <el-header style="padding:0;height: 56px;">
    <headbox ref="mychild"></headbox>
  </el-header>
      
    <el-aside  style="width:200px;background-color:#393D49;">
       <left></left>
    </el-aside>
        
    <el-main style="padding:0;">-->
    <!-- 放置内容区 -->
    <div class="contbox6_10" v-if="type == 1">
      <!-- 机构列表 -->
      <p class="titlelist6_10">
        数据统计
        <span style="color: #999">&nbsp;&nbsp;/&nbsp;&nbsp;</span>交易统计
      </p>
      <div class="sousuojg6_10">
        <el-form ref="form" :model="form" label-width="80px">
          <el-form-item label="归属机构" style="float: left">
            <el-input
              @focus="selectInstitution"
              v-model="officeName"
              style="width: 200px; margin-right: 40px"
            ></el-input>
          </el-form-item>
          <el-form-item label="机构名称" style="float: left">
            <el-input
              v-model="form.officeName"
              style="width: 200px; margin-right: 40px"
            ></el-input>
          </el-form-item>
          <!-- <el-form-item label="品牌名称" style="float: left;">
                    <el-input v-model="form.channelName" style="width: 200px;margin-right: 40px;"></el-input>
                  </el-form-item>
                  <el-form-item label="产品名称" style="float: left;">
                    <el-input v-model="form.productName" style="width: 200px;margin-right: 40px;"></el-input>
          </el-form-item>-->

          <el-form-item
            label="交易时间"
            style="width: 450px; float: left; margin-right: 40px"
          >
            <div style="display:flex">
              <el-col :span="9">
                <el-date-picker
                  type="date"
                  value-format="yyyy-MM-dd"
                  placeholder="选择开始日期"
                  v-model="form.startDate"
                  style="width: 100%"
                ></el-date-picker>
              </el-col>
              <el-col class="line" :span="1" style="text-align: center"
                >-</el-col
              >
              <!--  <el-col :span="9">
                      <el-time-picker placeholder="选择时间" v-model="form.EndDate" style="width: 100%;"></el-time-picker>
            </el-col>-->
              <el-date-picker
                v-model="form.endDate"
                type="date"
                value-format="yyyy-MM-dd"
                placeholder="选择结束时间"
                style="width: 150px"
              ></el-date-picker>
            </div>
          </el-form-item>
          <!-- <el-form-item label="" style="width: 25%;height:50px;float: left;">
          </el-form-item>-->
          <div style="width: 100%; float: left">
            <el-form-item
              label="交易总额"
              style="width:200px; float: left; font-weight: bold"
            >
              <span>{{ paySumAccount }}</span>
            </el-form-item>
            <el-form-item
              label="交易笔数"
              style="
                width: 100px;
                float: left;
                font-weight: bold;
                margin-left: 20px;
              "
            >
              <span>{{ paySumNum }}</span>
            </el-form-item>
          </div>
          <div style="clear:both"></div>

          <el-form-item
            style="
              float: right;
              margin-right: 20px;
              margin-top: -60px;
              text-align: right;
            "
          >
            <el-button type="primary" @click="onSubmit">搜索</el-button>
            <el-button @click="result">重置</el-button>
          </el-form-item>
        </el-form>
      </div>
      <p class="titlelist6_10" style="margin-bottom: 10px; line-height: 45px">
        交易列表
      </p>
      <div
        style="
          width: 100%;
          float: left;
          border-bottom: 1px solid #eee;
          margin-bottom: 30px;
        "
      ></div>
      <el-table
        ref="multipleTable"
        :data="tableData"
        tooltip-effect="dark"
        border
        :header-cell-style="{ background: '#DCDCDC', color: '#222' }"
        style="width: 98%; margin-bottom: 30px; margin-left: 2%"
        @selection-change="handleSelectionChange"
      >
        <el-table-column prop="officeUid" label="机构ID">
          <!--  <template slot-scope="scope">{{ scope.row.uid }}</template> -->
        </el-table-column>
        <el-table-column prop="officeName" label="机构名称"></el-table-column>
        <el-table-column prop="payAccount" label="交易金额"></el-table-column>
        <el-table-column prop="payNum" label="交易笔数"></el-table-column>
      </el-table>

      <div style="clear: both"></div>
      <el-pagination
        style="text-align: right"
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="form.page"
        :page-sizes="[10, 20, 30, 40, 50]"
        :page-size="form.number"
        layout="total, sizes, prev, pager, next, jumper"
        :total="totalNum"
      ></el-pagination>
    </div>

    <!-- </el-main>
      <el-footer style="padding:0;">
        <footerbox></footerbox>
      </el-footer>
    </el-container>
  </el-container>
    </el-container>-->
    <Tree :showType="showType" @func="transmit" />
  </div>
</template>

<script>
import Tree from "../tree/index";
export default {
  name: "route",
  data() {
    return {
      showType: false,
      paySumAccount: "",
      paySumNum: "",
      officeName: null,
      type: 1,
      currentPage: 1, //默认显示第一页
      pageSize: 1, //默认每页显示10条
      totalNum: 0, //总页数
      msg: [],
      form: {
        officeCode: "",
        oemUid:
          localStorage.getItem("jurisdiction") != 2
            ? localStorage.getItem("uid")
            : "", //OEMid
        officeUid: localStorage.getItem("uid"),
        officeName: "",
        parentUid: "",
        channelName: "",
        productName: "",
        startDate: "",
        endDate: "",
        page: 1,
        number: 10
      },
      tableData: [],
      multipleSelection: []
      //   urltype: this.GLOBAL.httpurl,
    };
  },
  // 页面初始化
  mounted: function() {
    window.scrollTo(0, 0);
    var _this = this;
    //  document.title = '交易统计';
    _this.list();
  },
  components: {
    // headbox,
    // footerbox,
    // left,
    Tree
  },

  methods: {
    //这里开始
    transmit(data) {
      console.log(data.uid);
      //归属机构的uid
      this.form.officeCode = data.uid;
      this.officeName = data.name;
    },
    //设置取消的
    determine() {
      this.showType = false;
    },

    selectInstitution() {
      this.showType = true;
    },
    //这里结束
    onnew() {
      this.type = 3;
    },

    result() {
      this.form.officeCode = "";
      this.officeName = "";
      this.form.officeName = "";
      this.form.startDate = "";
      this.form.endDate = "";
    },

    // 搜索
    onSubmit() {
      this.list();
    },
    // 初始化列表
    list() {
      var _this = this;
      _this
        .axios({
          //axios请求
          method: "post",
          url: "/api/dataStatistics/getPayStatistics",
          data: _this.form
        })
        .then(function(d) {
          if (d.data.code == "0000") {
            _this.tableData = d.data.data;
            _this.totalNum = d.data.total;

            _this.paySumAccount = d.data.paySumAccount;
            _this.paySumNum = d.data.paySumNum;
          } else {
            layer.open({
              content: d.data.msg,
              skin: "msg",
              time:  2 //1秒后自动关闭
            });
          }
        })
        .catch(function(error) {
          //axios请求失败回调
          console.log(error);
        });
    },
    // 每页条数改变
    handleSizeChange(val) {
      this.form.number = val; //动态改变
      this.list();
    },
    // 每页页数改变
    handleCurrentChange(val) {
      /* alert(`当前页: ${val}`);*/

      this.form.page = val; //动态改变
      this.list();
    },
    toggleSelection(rows) {
      if (rows) {
        rows.forEach(row => {
          this.$refs.multipleTable.toggleRowSelection(row);
        });
      } else {
        this.$refs.multipleTable.clearSelection();
      }
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    showdou() {
      this.$refs.mychild.parentHandleclick();
    }
  }
};
</script>

<style scoped>
/* 单独样式 */
.contbox6_10 {
  width: 96%;
  margin-left: 2%;
  /*  height: 87.5vh; */
  overflow-x: auto;
  box-sizing: border-box;
  float: left;
}
.titlelist6_10 {
  width: 100%;
  float: left;
  font-size: 16px;
  color: #222;
  margin-top: 40px;
}
.sousuojg6_10 {
  float: left;
  font-size: 16px;
  color: #222;
  box-sizing: border-box;
  background-color: #f6f6f6;
  margin-top: 20px;
  border-radius: 5px;
}
</style>
